import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/service/auth.service';
import { JitsiService } from 'src/app/service/jitsi.service';
import {ActivatedRoute} from '@angular/router';
import {JitsiToken} from 'src/app/model/jitsitoken';

declare var JitsiMeetExternalAPI: any;

@Component({
  selector: 'app-jitsi-sangatel-component',
  templateUrl: './jitsi-sangatel-component.component.html',
  styleUrls: ['./jitsi-sangatel-component.component.css']
})
export class JitsiSangatelComponentComponent implements OnInit {


  //domain: string = "meet.jit.si"; // For self hosted use your domain
  domain: string = "meet.sagantel.com";
  room: any;
  options: any;
  api: any;
  user: any;
  jwt: any;

  // For Custom Controls
  isAudioMuted = false;
  isVideoMuted = false;


  constructor(
    private router: Router,
    private jitsiTokenGenService: JitsiService,
    private authService: AuthService,
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    this.room = 'eightyxeighty'; // Set your room name

    this.route.params.subscribe(params => {
      this.room = params['room'];
      console.log("room name 2 " + this.room)
    })
  }

  ngAfterViewInit(): void {

    this.authService.getMe().subscribe

    this.jitsiTokenGenService.getTokenUserSangaTel(this.room).subscribe((data: JitsiToken) => {
      this.jwt=data.jitsi_jwt
      console.log(data.jitsi_jwt)
      this.options = {
        roomName: data.roomname,
        width: 1500,
        height: 800,
        configOverwrite: { prejoinPageEnabled: false },
        interfaceConfigOverwrite: {
          // overwrite interface properties
        },
        parentNode: document.querySelector('#jitsi-iframe'),
        userInfo: {
          displayName: data.username
        },
        jwt: data.jitsi_jwt
      }
      console.log("jitsi option");
      console.log(this.options)
  
      this.api = new JitsiMeetExternalAPI(this.domain, this.options);
  
      // Event handlers
      this.api.addEventListeners({
        readyToClose: this.handleClose,
        participantLeft: this.handleParticipantLeft,
        participantJoined: this.handleParticipantJoined,
        videoConferenceJoined: this.handleVideoConferenceJoined,
        videoConferenceLeft: this.handleVideoConferenceLeft,
        audioMuteStatusChanged: this.handleMuteStatus,
        videoMuteStatusChanged: this.handleVideoStatus
      });
    });
  }

  handleClose = () => {
    console.log("handleClose");
  }

  handleParticipantLeft = async (participant: any) => {
    console.log("handleParticipantLeft", participant); // { id: "2baa184e" }
    const data = await this.getParticipants();
  }

  handleParticipantJoined = async (participant: any) => {
    console.log("handleParticipantJoined", participant); // { id: "2baa184e", displayName: "Shanu Verma", formattedDisplayName: "Shanu Verma" }
    const data = await this.getParticipants();
  }

  handleVideoConferenceJoined = async (participant: any) => {
    console.log("handleVideoConferenceJoined", participant); // { roomName: "bwb-bfqi-vmh", id: "8c35a951", displayName: "Akash Verma", formattedDisplayName: "Akash Verma (me)"}
    const data = await this.getParticipants();
  }

  handleVideoConferenceLeft = () => {
    console.log("handleVideoConferenceLeft");
    this.router.navigateByUrl("/call/jitsi-thankyou")
  }

  handleMuteStatus = (audio: any) => {
    console.log("handleMuteStatus", audio); // { muted: true }
  }

  handleVideoStatus = (video: any) => {
    console.log("handleVideoStatus", video); // { muted: true }
  }

  getParticipants() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.api.getParticipantsInfo()); // get all participants
      }, 500)
    });
  }

  executeCommand(command: string) {
    this.api.executeCommand(command);;
    if (command == 'hangup') {
      console.log("executeCommand hanghup")
      this.router.navigateByUrl("/call/jitsi-thankyou")
      return;
    }

    if (command == 'toggleAudio') {
      this.isAudioMuted = !this.isAudioMuted;
    }

    if (command == 'toggleVideo') {
      this.isVideoMuted = !this.isVideoMuted;
    }
  }


}
